<template>
  <div>
    <div class="weui-search-bar">
      <form class="weui-search-bar__form" @submit="search">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search a_in-box"></i>
          <input type="search" class="weui-search-bar__input"
            placeholder="请输入书名"
            v-model='inputVal'
            @blur="hideInput" />
          <div @click="clearInput" v-if="inputVal.length > 0" class="weui-icon-clear">
            <!-- //- <icon type="clear" size="14"></icon> -->
          </div>
        </div>
        <label @click="showInput" class="weui-search-bar__label" v-show="inputShowed">
          <!-- //- <icon class="weui-icon-search" type="search" size="14"></icon> -->
          <div class="weui-search-bar__text">书目检索</div>
        </label>
      </form>
    </div>
    <img src="../assets/app-bg.png" mode="widthFix" style="width: 100%" />
  </div>
</template>

<script>
// import wepy from 'wepy'
// import store from '../common/store'

export default {
  data () {
    return {
      inputFocus: false,
      inputShowed: false,
      inputVal: ''
    }
  },
  mounted () {
    this.inputVal = this.$store.state.search.keyword
  },
  methods: {
    showInput () {
      this.inputShowed = true
      this.inputFocus = true
    },

    hideInput () {
      if (this.inputVal.length === 0) {
        this.inputVal = ''
        this.inputShowed = false
      }
      this.inputFocus = false
    },

    clearInput () {
      this.inputVal = ''
      this.inputFocus = true
    },

    inputTyping (e) {
      this.inputVal = e.target.value
    },

    search (e) {
      // 不stop会在URL里面自动加上一个?，可能由于form提交的问题
      e.preventDefault()
      e.stopPropagation()
      if (this.inputVal.length === 0) {
        // 提示没有输入关键词
      } else {
        // 进行搜索
        this.$router.push({
          name: 'searchResult',
          params: {
            keyword: this.inputVal
          }
        })
      }
      return false
    }
  }

}

</script>

<style lang="scss">
.searchbar-result{
  margin-top: 0;
  font-size: 14px;
}
.searchbar-result:before{
  display: none;
}
.weui-cell{
  padding: 12px 15px 12px 35px;
}

.weui-search-bar__form {
  border-radius: 20px;
  border: none;
  overflow: hidden;
  z-index: 10;
}
.weui-search-bar {
  padding: 30px 40px;
  background: linear-gradient(#0971ce, #3497E9);
  // background: linear-gradient(#fff, #333);
  border: none;

  &__cancel-btn {
    color: #fff;
  }

  &:before, &:after {
    content: '';
    display: none;
  }
}
.weui-search-bar__box .weui-icon-search,
.weui-search-bar__box .weui-icon-clear {
  line-height: 32px;
}
</style>
